<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			div{
				width: 500px;
				height: 500px;
				background-color: #aaffff;
				/*背景图属性*/
				background-image: url(img/蜡笔小新.png);
				/*背景图大于空间--背景尺寸属性：属性值 ① px %
				                                   ②contatin 等比例缩放图片
												     cover 等比例放大图片				*/
	            background-size: 30% 30%;
				/*背景值小于空间--平铺*/
				background-repeat: no-repeat;
				/*背景图小于空间--> 背景定位属性,属性值 x% y% 数值px 数值px 英文*/
				background-position: 20% 0%;
				background-position: 100px 0;
				background-position: center center;
			}
			/*背景图片固定模式:fixed固定模式-->理解：水印
			先决条件：1.高度空间足够形成滚动条
			         2.引入背景图滚动模式:①等比例放大图片，覆盖整个容器
					                   ②等比例缩放图片，保证图片全部显示在容器上
				     3.背景图固定属性：background-attachment: fixed;固定到页面上
			*/
			body{
				/*高度：100000px 形成滚动条*/
				height: 100000px;
				/*滚动模式-->背景图如何滚动--属性background-size*/
				background-size: contain;
				/*引入图*/
				background-image: url("img/蜡笔小新.png");
				background-repeat: no-repeat;
				/*水印效果：背景图固定*/
				background-attachment: fixed;
				/*background背景属性：背景图片 背景重复 背景定位 背景尺寸 背景固定;
				常用写法：background：背景图片 背景重复;
				*/
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi repudiandae, sunt alias asperiores earum tempora voluptatum tempore! Id accusamus, odit similique, et ipsam ab illo dicta nam alias dolor ea!Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora porro quae, quisquam corporis enim incidunt consectetur! Necessitatibus eum, enim cumque aliquid quam quidem ut explicabo fugit quaerat, rerum suscipit ea!Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae placeat ad ipsum accusamus sed ab! Maxime adipisci maiores reprehenderit dolorem minima accusamus dignissimos dolores recusandae! Quidem veritatis reiciendis praesentium numquam.
		<div></div>
	</body>
</html>